<template>
  <div class="mainBox flex justify-start align-center">
    <Menus :webconfig="webinfo.webinfo" :data="webinfo.menusnav"></Menus>

    <Newarticle :articles="webinfo.bestnews"></Newarticle>
    <!-- <Users :users="webinfo.members"></Users>
    <div class="mainAdBox flex justify-between align-center">
      <nuxt-link to="/confidence" style="flex:1 1 auto;">
        <div class="adLeftBox"></div>
      </nuxt-link>
      <a :href="tencentAds[3].link" target="_blank" class="adBox">
        <img src="../static/adsimgs/new/470x250.jpg" :alt="tencentAds[3].title">
      </a>
    </div> -->
    <Copy :webconfig="webinfo.webinfo" :frendlyData="webinfo.friends" :menuDatas="webinfo.menus"
      :bussinessData="webinfo.bussiness" :questionsData="webinfo.questions.data"></Copy>
  </div>
</template>

<script>
import { Ads } from '~/assets/inc/tencentAds';
import { extendsMenus, extendsParams, extendsEncrypte } from '~/assets/inc/common.js';
import { apis } from '~/assets/inc/apis.js';
export default {
  name: 'IndexPage',
  data() {
    return {
      webinfo: 'default',
      tencentAds: Ads,
    }
  },
  async asyncData(context) {
    extendsEncrypte({}, context.$axios);
    let res = await context.$axios.get(apis.indexApi, extendsParams({}));
    res.data.message.menusnav = extendsMenus([...res.data.message.menus]);
    return { webinfo: res.data.message }
  },
  head() {
    return {
      title: this.webinfo.webinfo.title,
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'keywords', content: this.webinfo.webinfo.web_keywords },
        { hid: 'description', name: 'description', content: this.webinfo.webinfo.web_descriptons }
      ]
    }
  },
  mounted() {
    this.$store.commit('setLoading', false);
  },
  beforeDestroy() {
    this.$store.commit('setLoading', true);
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  flex-flow: column;

  .mainAdBox {
    width: 1200px;
    padding-bottom: 30px;

    .adLeftBox {
      flex: 1 1 auto;
      height: 250px;
      background: url('https://api.dsnbc.com/images/20230807/248d076b1c71d144907b2cdcd89a169e.png') no-repeat center center;
      background-size: cover;
      border-radius: 20px;
      margin-right: 30px;
    }

    .adBox {
      img {
        border-radius: 20px;
      }
    }
  }
}

@media screen and (min-width:0px) and (max-width:1280px) {
  .mainBox {
    flex-flow: column;

    .mainAdBox {
      width: 100%;
      padding-bottom: 0;
      flex-flow: column;

      a {
        width: 100%;
        height: 20rem;
      }

      .adLeftBox {
        width: 100%;
        flex: 1 1 auto;
        height: 100%;
        background: url('https://api.dsnbc.com/images/20230807/248d076b1c71d144907b2cdcd89a169e.png') no-repeat center center;
        background-size: cover;
        border-radius: 0;
        margin-right: 0;
      }

      .adBox {
        flex: 1 1 auto;
        display: none;

        img {
          border-radius: 0;
        }
      }
    }
  }
}
</style>
